<template>
  <div class="users">
<!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" >
      <!-- <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item> -->
      <el-breadcrumb-item>系统配置</el-breadcrumb-item>
      <el-breadcrumb-item>供水工程配置</el-breadcrumb-item>
    </el-breadcrumb> 
<!-- 卡片式图 -->
<el-row >
<div class="box-row" >
  <div class="box-left">
    <el-link icon="el-icon-plus" @click="dialogVisible = true">增加</el-link>
  <el-link icon="el-icon-edit">编辑</el-link>
  <el-link icon="el-icon-view">查看</el-link>
  <el-link icon="el-icon-delete">删除</el-link>
  <el-link icon="el-icon-circle-plus-outline">导出</el-link>
    
  </div>
  <div class="box-right">
     供水工程配置：
     <input type="text"> 
 
    巡查日期：
    
    <input type="text" icon="el-icon-date"> 
    <i class="el-icon-date"></i>
    <el-link icon="el-icon-search" >查询</el-link>
  </div>
</div> 
<!-- 表格区 -->
 <el-table
    border
    ref="multipleTable"
    :data="tableData"
    style="width: 100%"
    :header-cell-style="{'text-align':'center'}"
    >
    <el-table-column
      type="selection"
      width="60"
      align='center'
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="300"
      align='center'
      >
      
    </el-table-column>
    <el-table-column
      prop="district"
      label="所需区域"
      width="200"
      align='center'
      >
    </el-table-column>
    <el-table-column
      prop="site"
      label="地理信息"
       width="200"
       align='center'
    >
    </el-table-column>
    <el-table-column
      prop="number"
      label="辖区水厂数量"
      width="200"
      align='center'
      >
    </el-table-column>
    <el-table-column
      prop="waterSupply"
      label="供水量(m³/d)"
      width="200"
      align='center'
      >
    </el-table-column>
    <el-table-column
      prop="uploadDate"
      label="上传日期"
      width="200"
      align='center'
      >
    </el-table-column>
    <el-table-column
      prop="note"
      label="备注"
      align='center'
      >
    </el-table-column>
    <el-table-column label="操作" align='center'>
      <template >
        <el-button
          size="mini"
           >编辑</el-button>
        <el-button
          size="mini"
          type="danger"
           >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
 </el-row> 
    <el-pagination
      :page-sizes="[1, 5, 7, 9]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="8">
    </el-pagination>
<!-- 添加用户弹窗 -->
    <el-dialog
  title="新增"
  :visible.sync="dialogVisible"
  width="35%"
  >
   
  
  <el-form  label-width="110px" size="medium  ">
  <el-form-item label="水厂名称:">
    <el-input ></el-input>
  </el-form-item>
  <el-form-item label="所属工程:">
    <el-input ></el-input>
  </el-form-item>
  <el-form-item label="地理位置:">
    <el-input ></el-input>
  </el-form-item>
  <el-form-item label="供水量(m³/d):">
    <el-input ></el-input>
  </el-form-item>
  <el-form-item label="上传日期:">
    <el-input suffix-icon="el-icon-date"></el-input>
  </el-form-item>
    <el-form-item label="活动形式:"  >
    <el-input type="textarea" :rows="4"></el-input>
  </el-form-item>
  </el-form>
    <el-button type="primary" @click="dialogVisible = false" class="btn" >保 存</el-button>
  
</el-dialog>
     </div>
</template>

<script>
export default {
 data() {
      return {
        // 弹窗
         dialogVisible: false,
        tableData: [{
          date: '2016-05-03',
          name: '贵池区农村饮水安全工程信息化系统工程',
          district: "贵池区",
          site: "安徽省池州市贵池区",
          number: 5,
          waterSupply: 4500,
          uploadDate: "2020-08-10 00:00:00",
          note: null   
     } ],
        
      }
 },
 methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
}
</script>

<style lang="less" scoped>
.users{
  
   .el-breadcrumb{
     background-color: #E9EDF0 !important;
    height: 50px;
line-height: 50px;
font-size: 14px;
padding-left: 5px;
   }
 .el-row{
     background:rgb(91,146,211);
   

.box-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:rgb(91,146,211);
  color: #fff;
  box-sizing: border-box;

  .box-left{
    padding: 5px;
    .el-link{
padding: 15px;
color: #fff;
    }

  }
  .box-right{
padding-right: 10px;
// overflow：hidden
 input{
  
  height:25px;
}
.el-link{
  padding-left: 10px;
   color: #fff;
}

  }
}
   }
   
   /deep/ .el-dialog__header {
  border-bottom: 2px solid #ebebeb;
}
.el-pagination{
       background: rgb(241, 241, 241);
       margin: 5px;
     }
  .btn{
    
    display:block;
    margin: 10px auto;
     width: 160px;
  }
   /deep/.el-icon-date{
    color: #1375BC;
    font-size: 25px;
  }
  
}
</style>